<template>
    <div class="wh-full">
        <div class="wh-full pr" style="z-index:1">
            <div class="title ml20 mb20">数据总览</div>
            <el-row type="flex" style="height: 18%;" justify="space-between">
                <el-col :span="4" class="card"> <div class="card1 wh-full"><p class="total">6<span></span></p><p class="tips">接入主机厂数<img src="../../assets/img/bzxt_autoai_icon_arrow.png" /></p></div> </el-col>
                <el-col :span="4" class="card"> <div class="card2 wh-full"><p class="total">3<span></span></p><p class="tips">接入保司数<img src="../../assets/img/bzxt_autoai_icon_arrow.png" /></p></div> </el-col>
                <el-col :span="4" class="card"> <div class="card3 wh-full"><p class="total">18<span>w</span></p><p class="tips">累计保单数<img src="../../assets/img/bzxt_autoai_icon_arrow.png" /></p></div> </el-col>
                <el-col :span="4" class="card"> <div class="card2 wh-full"><p class="total">10<span>w</span></p><p class="tips">累计服务车辆数<img src="../../assets/img/bzxt_autoai_icon_arrow.png" /></p></div> </el-col>
                <el-col :span="4" class="card"> <div class="card4 wh-full"><p class="total">240<span>w</span></p><p class="tips">累计车主奖励金<img src="../../assets/img/bzxt_autoai_icon_arrow.png" /></p></div> </el-col>
            </el-row>
            <el-card shadow="always" body-style="padding: 10px;" class="mt20 br10 pdl10">
                <div class="title">避险数据</div>
                <div class="flex pr">
                    <div id="main" class="flex1" style="height:400px;"></div>
                    <div id="main2" class="flex1" style="height:400px;"></div>
                    <div class="label pa flex flex-ai-center">
                        <img src="../../assets/img/bzxt_autoai_icon_xian.png" alt="">
                        <p class="txt">30,000 辆</p>
                    </div>
                </div>
            </el-card>
            <div class="title ml20 mb20">保险数据</div>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card shadow="always" body-style="padding: 10px;" class="br10 pdl10">
                        <div id="main4" style="width: 100%;height: 400px;"></div>
                    </el-card>
                </el-col>
                <el-col :span="12">
                    <el-card shadow="always" body-style="padding: 10px;" class="br10 pdl10">
                        <div id="main3" style="width: 100%;height: 400px;"></div>
                    </el-card>
                </el-col>
            </el-row>
            <el-card shadow="always" body-style="padding: 10px;" class="br10 pdl10 pr">
                <div id="main5" class="flex1" style="height: 300px;"></div>
                <div class="radioGroup pa">
                    <el-radio-group v-model="radio" @change="changes">
                        <el-radio-button label="1">保单数</el-radio-button>
                        <el-radio-button label="2">新增数</el-radio-button>
                        <el-radio-button label="3">续保率</el-radio-button>
                    </el-radio-group>
                </div>
            </el-card>
            <div class="title ml20 mb20">主机厂数据</div>
            <el-row :gutter="20">
                <el-col :span="9">
                    <el-card shadow="always" body-style="padding: 10px;" class="br10 pdl10">
                        <div id="main7" style="width: 100%;height: 600px;"></div>
                    </el-card>
                </el-col>
                <el-col :span="15">
                    <el-card shadow="always" body-style="padding: 9px;" class="br10 pdl10">
                        <div id="main6" style="width: 100%;height: 280px;"></div>
                    </el-card>
                    <el-card shadow="always" body-style="padding: 9px;" class="br10 pdl10">
                        <div id="main8" style="width: 100%;height: 280px;"></div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
        <div class="bg wh-full"></div>
    </div>
</template>

<script>
import echarts from 'echarts';
export default {
    name: "OperationsPanel",
    data() {
        return {
            radio: '1'
        };
    },
    created() {
    },
    watch: {
    },
    mounted() {
        var self = this;
        // getChart1  ---> 避险数据环形图 
        self.getChart1();
        // getChart2 ---> 主动避险车辆数波浪图 
        self.getChart2();
        // getChart3 ---> 累计保单数扇形图 
        self.getChart3();
        // getChart4 ---> 各渠道保单数柱形图 
        self.getChart4();
        // getChart5 ---> 近一年保单数折线图 
        self.getChart5();
        // getChart6 ---> 主机厂累计保单数柱形图 
        self.getChart6();
        // getChart7 ---> 奖励金发放数环形图 
        self.getChart7();
        // getChart8 ---> 各主机厂预警/避险车辆数柱形图 
        self.getChart8();
    },
    methods: {
        getChart1(){
            var myChart = echarts.init(document.getElementById('main')); 
            var option = {
                title: {    
                    subtext: '避险类别车辆数（ 本季度 ）',
                    left: 'left',
                    subtextStyle: {
                        color: '#3C3A6F',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    top: 'middle',
                    left: '65%',
                    icon: 'circle',
                    itemGap:  30,
                    itemHeight: 10,
                    textStyle: {
                        fontSize: 12
                    },
                    data: ['道路积水   5,200 辆', '冰雹         3,700 辆', '暴雪         2,100 辆', '台风         1,000 辆']
                },
                color:['#8E4DEE', '#F7AB48','#F87039','#1DCAC2'],
                series: [
                    {
                        name: '避险数据',
                        type: 'pie',
                        radius: ['52%', '70%'],
                        height: '400px',
                        left: '-25%',
                        top: '20px',
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            fontSize: 32,
                            color: "#3C3A6F",
                            fontWeight: 'bold',
                            rich: {
                                fz: {
                                    fontSize: 14,
                                    color: '#686786'
                                }
                            },
                            formatter: [
                                '{fz|主动避险车辆总数}', '¥12,000'
                            ].join('\n\n'),
                        },
                        emphasis: {
                            label: { show: false }  
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 5200, name: '道路积水   5,200 辆'},
                            {value: 3700, name: '冰雹         3,700 辆'},
                            {value: 2100, name: '暴雪         2,100 辆'},
                            {value: 1000, name: '台风         1,000 辆'}
                        ]
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize",function(){ myChart.resize(); });
        },
        getChart2(){
            var myChart2 = echarts.init(document.getElementById('main2'));
            var option2 = {
                xAxis: {
                    type: 'category',
                    show: false,
                    boundaryGap: false
                },
                yAxis: {
                    type: 'value',
                    show: false,
                    boundaryGap: [0, '30%']
                },
                grid:{
                    y2: 100,
                },
                title: {    
                    subtext: '主动避险车辆数（ 本年 ）',
                    left: '5%',
                    subtextStyle: {
                        color: '#3C3A6F',
                        fontSize: 14
                    }
                },
                visualMap: {
                    type: 'piecewise',
                    show: false,
                    dimension: 0,
                    seriesIndex: 0,
                    pieces: [{
                        gt: 0,
                        lt: 100,
                        color: 'rgba(202,232,252, 0.7)'
                    }]
                },
                series: [
                    {
                        type: 'line',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#F3A556',
                            width: 4
                        },
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#F3A556'
                                }, {
                                    offset: 1, color: 'rgba(240,133,76,0.05)'
                                }]
                            }
                        },
                        data: [
                            ['2019-10-10', 90],
                            ['2019-10-11', 300],
                            ['2019-10-12', 230],
                            ['2019-10-13', 330],
                            ['2019-10-14', 250],
                            ['2019-10-15', 260],
                        ]
                    }
                ]
            };
            myChart2.setOption(option2);
            window.addEventListener("resize",function(){ myChart2.resize(); });
        },
        getChart3(){
            var myChart3 = echarts.init(document.getElementById('main3'));
            var option3 = {
                title: {    
                    subtext: '累计保单数',
                    left: 'left',
                    subtextStyle: {
                        color: '#3C3A6F',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}({d}%)'
                },
                color:['#8E4DEE', '#F7AB48','#F87039'],
                legend: {
                    orient: 'vertical',
                    top: 'middle',
                    left: '70%',
                    icon: 'circle',
                    itemGap:  30,
                    itemHeight: 10,
                    textStyle: { fontSize: 12 },
                    data: ['阳光  11W 单', '平安  3W 单', '太平  4W 单']
                },
                series: [
                    {
                        name: '累计保单数',
                        type: 'pie',
                        avoidLabelOverlap: false,
                        height: '400px',
                        top: 10,
                        left: '-25%',
                        label: {
                            show: false,
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 110000, name: '阳光  11W 单'},
                            {value: 40000, name: '平安  3W 单'},
                            {value: 30000, name: '太平  4W 单'}
                        ]
                    }
                ]
            };
            myChart3.setOption(option3);
            window.addEventListener("resize",function(){ myChart3.resize(); });

        },
        getChart4(){
            var myChart4 = echarts.init(document.getElementById('main4'));
            var option4 = {
                title: {    
                    subtext: '各渠道保单数（ 本月 ）',
                    left: 'left',
                    subtextStyle: {
                        color: '#3C3A6F',
                        fontSize: 14
                    }
                },
                legend: {
                    orient: 'horizontal',
                    itemWidth: 20,
                    itemHeight: 10,
                    top: '15%',
                    right: '10%',
                    icon: 'circle',
                    textStyle: {
                        fontSize: 12
                    },
                    data: ['阳光', '平安', '太平']
                },
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '4S店', '保险公司', '第三方'],
                        ['阳光', 12500, 8000, 8000],
                        ['平安', 10000, 6000, 5500],
                        ['太平', 7000, 8000, 4500]
                    ]
                },
                xAxis: [
                    {type: 'category',axisLine: {show:true,lineStyle: {color: '#BBBBBB'}}, axisTick: {show:false},}
                ],
                yAxis: [
                    {splitNumber: 3,show:true,axisLine: {show:false,lineStyle: {color: '#BBBBBB'}},axisTick: {show:false},
                        splitLine:{
                            show:true,
                            lineStyle:{color: '#D5D5D5'}
                        }
                    }
                ],
                grid: [
                    {bottom: '10%',top: '35%'}
                ],
                itemStyle: {
                    barBorderRadius: [10, 10, 0, 0]
                },
                series: [
                    {type: 'bar', barGap: '70%',barWidth: '8%', seriesLayoutBy: 'row',itemStyle:{
                      color:   '#F7AB48'
                    }},
                    {type: 'bar', barGap: '70%',barWidth: '8%', seriesLayoutBy: 'row',itemStyle:{
                      color:   '#F87039'
                    }},
                    {type: 'bar', barGap: '70%',barWidth: '8%', seriesLayoutBy: 'row',itemStyle:{
                      color:   '#8E4DEE'
                    }}
                ]
            };
            myChart4.setOption(option4);
            window.addEventListener("resize",function(){ myChart4.resize(); });
        },
        getChart5(){
            var myChart5 = echarts.init(document.getElementById('main5'));
            var option5 = {
                title: {    
                    subtext: '保单数据',
                    left: 'left',
                    subtextStyle: {
                        color: '#3C3A6F',
                        fontSize: 14
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月'],
                    axisLine: { show:true, lineStyle:{ color: '#BBBBBB' } },axisTick: {show:false}
                },
                yAxis:{
                    splitNumber: 4,
                    axisLine: {show:false,lineStyle:{color: '#BBBBBB'}},
                    axisTick: {show:false},
                    splitLine:{
                        show:true,
                        lineStyle:{color: '#D5D5D5'}
                    },
                    axisLabel: {  
                        show: true,  
                        interval: 'auto',  
                        formatter: function(value){
                            return value.toLocaleString();
                        }
                    }
                },
                grid: {
                    left: '2%',
                    right: '5%',
                    top: '40%',
                    bottom: '2%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['阳光', '平安', '太平'],
                    orient: 'horizontal',
                    itemHeight: 10,
                    top: '30px',
                    right: '5%',
                    icon: 'circle',
                    textStyle: {
                        fontSize: 12
                    },
                },
                series: [
                    {
                        data: [4200, 3000, 3300, 3400, 3500, 3600, 4300,4400,4500,4800,4800,5800],
                        type: 'line',
                        name: '阳光',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#398FE4',
                            width: 4
                        },
                        color: '#398FE4',
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#398FE4'
                                }, {
                                    offset: 1, color: 'rgba(78,114,238,0.8)'
                                }]
                            }
                        }
                    },{
                        data: [5000, 5800, 5900, 5500, 5550, 5550, 5550,5550,5550,7000,6200,6000],
                        type: 'line',
                        name: '平安',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#1DCAC2',
                            width: 4
                        },
                        color: '#1DCAC2',
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#1DCAC2'
                                }, {
                                    offset: 1, color: 'rgba(29,202,194,0.1)'
                                }]
                            }
                        }
                    },{
                        data: [2900, 500, 2600, 1800, 4300, 3000, 2800,3300, 3200, 3500, 5000, 4500],
                        type: 'line',
                        name: '太平',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#8E4DEE',
                            width: 4
                        },
                        color: '#8E4DEE',
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#8E4DEE'
                                }, {
                                    offset: 1, color: 'rgba(144,74,236,0.1)'
                                }]
                            }
                        }
                    }
                ]
            };
            myChart5.setOption(option5);
            window.addEventListener("resize",function(){ myChart5.resize(); });
        },
        getChart5_b(){
            var myChart5 = echarts.init(document.getElementById('main5'));
            var option5 = {
                title: {    
                    subtext: '保单数据',
                    left: 'left',
                    subtextStyle: {
                        color: '#3C3A6F',
                        fontSize: 14
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月'],
                    axisLine: { show:true, lineStyle:{ color: '#BBBBBB' } },axisTick: {show:false}
                },
                yAxis:{
                    type: 'value',
                    splitNumber: 4,
                    axisLine: {show:false,lineStyle:{color: '#BBBBBB'}},
                    axisTick: {show:false},
                    splitLine:{
                        show:true,
                        lineStyle:{color: '#D5D5D5'}
                    },
                    axisLabel: {
                        formatter: function(value){
                            return value.toLocaleString();
                        }
                    },
                },
                grid: {
                    left: '2%',
                    right: '5%',
                    top: '40%',
                    bottom: '2%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['阳光', '平安', '太平'],
                    orient: 'horizontal',
                    itemHeight: 10,
                    top: '30px',
                    right: '5%',
                    icon: 'circle',
                    textStyle: {
                        fontSize: 12
                    },
                },
                series: [
                    {
                        data: [5200, 5200, 5500, 4500, 4700, 6550, 5650, 4550, 5550, 7000, 6200, 6000],
                        type: 'line',
                        name: '阳光',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#398FE4',
                            width: 4
                        },
                        color: '#398FE4',
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#398FE4'
                                }, {
                                    offset: 1, color: 'rgba(78,114,238,0.8)'
                                }]
                            }
                        }
                    },{
                        data: [2400, 1500, 3600, 1800, 6300, 5000, 3800, 2300, 3200, 3500, 5000, 4500],
                        type: 'line',
                        name: '平安',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#1DCAC2',
                            width: 4
                        },
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        color: '#1DCAC2',
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#1DCAC2'
                                }, {
                                    offset: 1, color: 'rgba(29,202,194,0.1)'
                                }]
                            }
                        }
                    },{
                        data: [4000, 5000, 3400, 2400, 4500, 4600, 5300, 3400, 4500, 4800, 4800, 5800],
                        type: 'line',
                        name: '太平',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#8E4DEE',
                            width: 4
                        },
                        color: '#8E4DEE',
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#8E4DEE'
                                }, {
                                    offset: 1, color: 'rgba(144,74,236,0.1)'
                                }]
                            }
                        }
                    }
                ]
            };
            myChart5.setOption(option5);
            window.addEventListener("resize",function(){ myChart5.resize(); });
        },
        getChart5_c(){
            var myChart5 = echarts.init(document.getElementById('main5'));
            var option5 = {
                title: {    
                    subtext: '保单数据',
                    left: 'left',
                    subtextStyle: {
                        color: '#3C3A6F',
                        fontSize: 14
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['7月', '8月', '9月', '10月', '11月', '12月', '1月', '2月', '3月', '4月', '5月', '6月'],
                    axisLine: { show:true, lineStyle:{ color: '#BBBBBB' } },axisTick: {show:false}
                },
                yAxis:{
                    splitNumber: 4,
                    axisLine: {show:false,lineStyle:{color: '#BBBBBB'}},
                    axisTick: {show:false},
                    splitLine:{
                        show:true,
                        lineStyle:{color: '#D5D5D5'}
                    },
                    axisLabel: {  
                        show: true,  
                        interval: 'auto',  
                        formatter: function(value){
                            if(value !== 0) return value + ' %';
                            else return value;
                        }
                    }
                },
                grid: {
                    left: '2%',
                    right: '5%',
                    top: '40%',
                    bottom: '2%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['阳光', '平安', '太平'],
                    orient: 'horizontal',
                    itemHeight: 10,
                    top: '30px',
                    right: '5%',
                    icon: 'circle',
                    textStyle: {
                        fontSize: 12
                    },
                },
                series: [
                    {
                        data: [25, 22, 18, 17, 19, 33, 65, 45, 33, 44, 55, 77],
                        type: 'line',
                        name: '阳光',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#398FE4',
                            width: 4
                        },
                        color: '#398FE4',
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#398FE4'
                                }, {
                                    offset: 1, color: 'rgba(78,114,238,0.8)'
                                }]
                            }
                        }
                    },{
                        data: [62, 52, 34, 35, 42, 70, 50, 40, 33, 46, 55, 66],
                        type: 'line',
                        name: '平安',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#1DCAC2',
                            width: 4
                        },
                        color: '#1DCAC2',
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#1DCAC2'
                                }, {
                                    offset: 1, color: 'rgba(29,202,194,0.1)'
                                }]
                            }
                        }
                    },{
                        data: [20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 42],
                        type: 'line',
                        name: '太平',
                        smooth: 0.6,
                        symbol: 'none',
                        lineStyle: {
                            color: '#8E4DEE',
                            width: 4
                        },
                        color: '#8E4DEE',
                        markLine: {
                            symbol: ['none', 'none'],
                            label: {show: false}
                        },
                        markArea: {
                            silent: true,
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#8E4DEE'
                                }, {
                                    offset: 1, color: 'rgba(144,74,236,0.1)'
                                }]
                            }
                        }
                    }
                ]
            };
            myChart5.setOption(option5);
            window.addEventListener("resize",function(){ myChart5.resize(); });
        },
        getChart6(){
            var myChart6 = echarts.init(document.getElementById('main6'));
            var option6 = {
                    title: {    
                        subtext: '主机厂累计保单数',
                        left: 'left',
                        subtextStyle: {
                            color: '#686786',
                            fontSize: 14
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'none'
                        }
                    },
                    xAxis : [
                        {
                            show:false,
                            type : 'value',
                            boundaryGap : [0, 0],
                            position: 'top'
                        }
                    ],
                    yAxis : [
                        {
                            type : 'category',
                            data : ['吉利','长城','东风','丰田','恒大','大众'],
                            axisLine:{show:false,lineStyle: {color: '#BBBBBB'}},     //坐标轴
                            inverse: true,
                            axisTick:[{    //坐标轴小标记
                                show:true
                            }],
                            axisLabel:{
                                nameTextStyle:{
                                    fontSize: 14,
                                    color: '#3C3A6F',
                                    padding: [0, 20, 0, 0]
                                }
                            }
                        }
                    ],
                    itemStyle: {
                        barBorderRadius: [10, 10, 10, 10]
                    },
                    grid: {
                        left: '3%',
                        right: '8%',
                        top: '8%',
                        bottom: '5%',
                        containLabel: true
                    },
                    series: [
                    {
                        type: 'bar',
                        barWidth: '35%',
                        itemStyle:{
                            color: '#F7AB48'
                        },
                        data:  [23423,15642,9837,7388,6736,6712],
                        label: {
                            show: true,
                            position: 'right',
                            color: '#3C3A6F',
                            fontFamily: 'DINPro',
                            fontWeight: 'bold',
                            padding: [0, 0, 0, 10],
                        }
                    }
                        
                ]
            };
            myChart6.setOption(option6);
            window.addEventListener("resize",function(){ myChart6.resize(); });
        },
        getChart7(){
            var myChart7 = echarts.init(document.getElementById('main7'));
            var option7 = {
                title: {    
                    subtext: '奖励金发放数（ 本月 ）',
                    left: 'left',
                    subtextStyle: {
                        color: '#686786 ',
                        fontSize: 14
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} ({d}%)'
                },
                legend: {
                    orient: 'horizontal',
                    left: 'center',
                    bottom: '12%',
                    width: '70%',
                    itemWidth: 50,
                    itemHeight: 10,
                    itemGap: 30,
                    icon: 'circle',
                    textStyle: {
                        fontSize: 12,
                        color: '#686786'
                    },
                    data: ['吉利   ¥57,000', '长城   ¥45,000','东风   ¥36,000', '丰田   ¥37,000', '大众   ¥32,000', '恒大   ¥30,000']
                },
                color:['#8E4DEE', '#F7AB48', '#F87039', '#4E72EE', '#1DCAC2', '#4733D9'],
                series: [
                    {
                        name: '奖励金发放数',
                        type: 'pie',
                        radius: ['52%', '70%'],
                        height: '400px',
                        bottom: '20%',
                        avoidLabelOverlap: false,
                        label: {
                            show: true,
                            position: 'center',
                            fontSize: 32,
                            color: "#3C3A6F",
                            fontWeight: 'bold',
                            rich: {
                                fz: {
                                    fontSize: 14,
                                    color: '#686786'
                                }
                            },
                            formatter: [
                                '{fz|累计发放奖励金额}', '¥240,000'
                            ].join('\n\n')
                        },
                        emphasis: {
                            label: {
                                show: false,
                                fontSize: '16',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {value: 57000, name: '吉利   ¥57,000'},
                            {value: 45000, name: '长城   ¥45,000'},
                            {value: 36000, name: '东风   ¥36,000'},
                            {value: 37000, name: '丰田   ¥37,000'},
                            {value: 30000, name: '恒大   ¥30,000'},
                            {value: 32000, name: '大众   ¥32,000'}
                        ]
                    }
                ]
            };
            myChart7.setOption(option7);
            window.addEventListener("resize",function(){ myChart7.resize(); });
        },
        getChart8(){
            var myChart8 = echarts.init(document.getElementById('main8'));
            var option8 = {
                title: {    
                    subtext: '各主机厂预警/避险车辆数（ 本月 ）',
                    left: 'left',
                    subtextStyle: {
                        color: '#686786',
                        fontSize: 14
                    }
                },
                color:['#F7AB48', '#8E4DEE'],
                legend: {
                    orient: 'horizontal',
                    itemHeight: 10,
                    top: '15%',
                    right: '10%',
                    icon: 'circle',
                    textStyle: {
                        fontSize: 12
                    },
                    data: ['预警数', '避险数']
                },
                tooltip: {},
                dataset: {
                    source: [
                        ['product', '吉利', '长城', '东风', '丰田', '大众', '恒大'],
                        ['预警数', 9000, 8000, 8000, 6000, 4000, 3000],
                        ['避险数', 6000, 3000, 4000, 3000, 3000, 2000],
                    ]
                },
                xAxis: [
                    {type: 'category',axisLine: { show:true, lineStyle:{ color: '#BBBBBB' } },axisTick: {show:false}}
                ],
                yAxis: [
                    {splitNumber: 3,show:true,axisLine: {show:false, lineStyle:{ color: '#BBBBBB' }},axisTick: {show:false},
                        splitLine:{
                            show:true,
                            lineStyle:{color: '#D5D5D5'}
                        }
                    }
                ],
                grid: [
                    {bottom: '10%',top: '35%',left: '8%'}
                ],
                itemStyle: {
                    barBorderRadius: [10, 10, 0, 0]
                },
                series: [
                    {type: 'bar', barGap: '50%', barWidth: '8%', seriesLayoutBy: 'row',itemStyle:{
                      color:   '#F7AB48'
                    }},
                    {type: 'bar', barGap: '50%', barWidth: '8%', seriesLayoutBy: 'row',itemStyle:{
                      color:   '#8E4DEE'
                    }}
                ]
            };
            myChart8.setOption(option8);
            window.addEventListener("resize",function(){ myChart8.resize(); });
        },
        changes(val) {
            let that = this 
            switch (val) {
                case '1':
                    that.getChart5();
                    break;
                case '2':
                    that.getChart5_b();
                    break;
                case '3':
                    that.getChart5_c();
                    break;
            }
        }
    },
};
</script>

<style scoped>
    .bg{background: url(../../assets/img/bzxt_bg.png) repeat 100% 100%;position: fixed;top: 9%;left: 0;}
    .title{color: #3C3A6F;font-size: 16px;line-height: 21px;font-family: 'MicrosoftYaHei';font-weight: bold;padding-left: 4px;padding-top: 5px;margin-bottom: 10px !important;}
    .card{height: 100%;width: 18%;border-radius: 8px;display: inline-table;}
    .card1,.card2,.card3,.card4{padding-bottom: 5%;}
    .card1{background: url(../../assets/img/bzxt_autoai_card_1.png) no-repeat 100% 100%;background-size: 100% 100%;}
    .card2{background: url(../../assets/img/bzxt_autoai_card_2.png) no-repeat 100% 100%;background-size: 100% 100%;}
    .card3{background: url(../../assets/img/bzxt_autoai_card_3.png) no-repeat 100% 100%;background-size: 100% 100%;}
    .card4{background: url(../../assets/img/bzxt_autoai_card_4.png) no-repeat 100% 100%;background-size: 100% 100%;}

    .card .total{font-family: 'DINPro';font-size: 40px;color: #FFF;font-weight: bold;padding-top: 18%;padding-left: 10%;}
    .card .tips{font-family: 'PingFangSC-Semibold';font-size: 12px;color: #FFFFFF;letter-spacing: 0;line-height: 10px;padding-left: 10%;}
    .card span{font-size: 25px;}
    .card img{padding-left: 5px;}

    .label {top: 27%;right: 23%;}
    .label img{width: 30px;height: 30px;padding: 5px 10px;}
    .label .txt{color: #3C3A6F;font-size: 50px;font-family: "DINPro";font-weight: bold;}

    .radioGroup{top: 18%; left: 3%;}

</style>
